<block name='deskmain'>
<!-- Attention:
1 - block must defined inside div-id since JS will work by div-id
2 - you can dynamicly remove any block by thinkPHP template rule
-->
<!-- deskmain Layout:
!!!!!!!!!!!!!!!!! deskmain !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
~~~~~~~~~~~~~~~~~ deskFrame ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
==========================================================
~~~~~~~~~~~~~~~~~ deskTopBar ~~~~~~~~~~~~~~~~~~~~~~~~~~~
deskTopBarToolBar    | deskTopBarAlert
(tool bar on desk top ) | (alert message on desk top)
~~~~~~~~~~~~~~~~~ end of deskTopBar ~~~~~~~~~~~~~~~~~~~~
==========================================================
~~~~~~~~~~~~~~~~~ deskBody (must) ~~~~~~~~~~~~~~~~~~~~~~
deskBodySideMenu |   deskBodyMainBody
(Menu for APP)      |   (main display body for APP)
(auto hide if none) |   (auto-width if no sideMenu)
~~~~~~~~~~~~~~~~~ end of deskBody ~~~~~~~~~~~~~~~~~~~~~~
==========================================================
~~~~~~~~~~~~~~~~~ end of deskFrame~~~~~~~~~~~~~~~~~~~~~~~
-->

<div id="deskFrame">
    <block name="deskTopBar">
    <div id="deskTopBar" class="col-xs-12">
        <div id="deskTopBarToolBar" class="col-md-6 btn-toolbar" role="toolbar" aria-label="...">
            <div class="btn-group btn-group-lg btn-group-primary" role="group" aria-label="...">
                <button id="sideMenuToggle" onclick="toggledeskBodySideMenu();" type='button' class="btn btn-default" >
                    <span class="glyphicon glyphicon-list"></span>
                </button>
            </div>

            <div class="btn-group btn-group-lg" role="group" aria-label="...">
                <button type="button" class="btn btn-primary">1</button>
                <button type="button" class="btn btn-primary">2</button>
                <button type="button" class="btn btn-primary">3</button>
            </div>
            <div class="btn-group btn-group-lg" role="group" aria-label="...">
                <button type="button" class="btn btn-danger">1</button>
                <button type="button" class="btn btn-danger">2</button>
                <button type="button" class="btn btn-danger">3</button>
            </div>
        </div>

        <div id='deskTopBarAlert' class="col-md-6 alert alert-warning alert-dismissible" role="alert" style="margin-bottom:0px">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <p class='alert-content'>Better check yourself, you're not looking too good.</p>
        </div>
    </div>
    </block>

    <block name="deskBody">
    <div id='deskBody' class="col-xs-12" >

        <div id="deskBodySideMenu" class="hide col-md-1">
            <block name="deskBodySideMenu">
            <ul class="menulist">
                <li class='menu mainmenu'><a data-toggle="collapse" href="#submenu1" aria-expanded="false" aria-controls="#submenu1">
                MainMenu1 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a>
                </li>
                    <ul id="submenu1" class="collapse row">
                        <li class="menu submenu"><a href="#">submenu1-1</a></li>
                        <li class="menu submenu"><a href="#">submenu1-2</a></li>  
                    </ul>                 
                <li class='menu mainmenu'><a data-toggle="collapse" href="#submenu1" aria-expanded="false" aria-controls="#submenu1">
                MainMenu2</a></li>
                 <li class='menu mainmenu'><a data-toggle="collapse" href="#submenu3" aria-expanded="false" aria-controls="#submenu3">
                MainMenu3</a></li>
                    <ul id="submenu3" class="collapse row">
                        <li class="menu submenu"><a href="#">submenu3-1</a></li>
                        <li class="menu submenu"><a href="#">submenu3-2</a></li>  
                    </ul>
            </ul> 
            </block>               
        </div>
        
        <div id="deskBodyMainBody" class="col-xs-12">
            <block name="deskBodyMainBody"></block>
        </div>
    </div>
    </block>
</div>

<!-- dynamic modal dialog -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">请确认操作！</h4>
      </div>
      <div class="modal-body myconfirmtext">
       确认提示文字
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="return false;">Cancel</button>
        <button type="button" class="btn btn-primary" onclick="return true;">Confirm</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">

var menuwidth = $("#deskBodySideMenu").width()+1;

function myConfirm( confirmText ){
    $('.myconfirmtext').text( confirmText );
    var result = $('#myModal').modal('show');
    console.log( 'result:' + result );
    return false;
}

function checkMenulist(){
    if( $('.menulist').length>0 ){
        return true;
    }else{
        return false;
    }
}
function initdeskBodySideMenu(){
    if( checkMenulist()==false ){
        $('#sideMenuToggle').addClass('disable');
        // $('#deskBodySideMenu').css('margin-left', -1*menuwidth);
        // $('#deskBodyMainBody').css( 'min-width', $(window).width() );
        $("#deskBodySideMenu").addClass('menushow');
        toggledeskBodySideMenu();
    }else{
        $("#deskBodySideMenu").addClass('menuhide');
        toggledeskBodySideMenu();
    }
}
function toggledeskBodySideMenu() {
    if( $("#deskBodySideMenu").hasClass('menushow') ){
        $("#deskBodySideMenu").removeClass().addClass('menuhide animated fadeOutLeft');
        $('#deskBodyMainBody').removeClass().addClass('col-md-12');
        $('#deskBodySideMenu').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', toggledeskBodyMainBody);
    }else{
        $('#deskBodyMainBody').css( 'min-width', $(window).width()-menuwidth );
        $("#deskBodySideMenu").css( 'margin-left', '0px' );
        // $('#menutoggle').css( 'left', menuwidth );
        $("#deskBodySideMenu").removeClass().addClass('menushow animated fadeInLeft');
    }
}

function toggledeskBodyMainBody() {
    if( $("#deskBodySideMenu").hasClass('menushow') ){
        $('#deskBodySideMenu').css('margin-left','0px');
        $('#deskBodyMainBody').css('min-width',$(window).width()-menuwidth);

    }else{
        $('#deskBodySideMenu').css('margin-left', -1*menuwidth);
        $('#deskBodyMainBody').css( 'min-width', $(window).width() );
        // $('#menutoggle').css( 'left', '0px' );
    }
}

//initdeskBodySideMenu();
$('#sideMenuToggle').click(function() {
    toggledeskBodySideMenu();
});

</script>

</block>